import { createBrowserRouter } from "react-router-dom";
import { lazy, Suspense } from "react";
import AuthRoute from "@/components/AuthRoute";
import GeekLayout from "@/pages/layout";
import Login from "@/pages/Login";
import NotFound from "@/pages/NotFound";
import { Spin } from "antd";

// 1. 使用lazy函数对组件进行导入(路由懒加载)
const Home = lazy(() => import("@/pages/Layout/Home"));
const Publish = lazy(() => import("@/pages/Layout/Publish"));
const Article = lazy(() => import("@/pages/Layout/Article"));

const router = createBrowserRouter([
  // 首页路由
  {
    path: "/",
    element: (
      // <AuthRoute>组件用于路由鉴权
      <AuthRoute>
        <GeekLayout />
      </AuthRoute>
    ),
    // 二级子路由
    children: [
      {
        // path: "home",
        index: true, // 设置为默认二级路由
        element: (
          <Suspense
            fallback={
              <Spin size="large" style={{ width: "100%", marginTop: "12%" }} />
            }
          >
            <Home />
          </Suspense>
        ),
      },
      {
        path: "article",
        element: (
          <Suspense
            fallback={
              <Spin size="large" style={{ width: "100%", marginTop: "12%" }} />
            }
          >
            <Article />
          </Suspense>
        ),
      },
      {
        path: "publish",
        element: (
          <Suspense
            fallback={
              <Spin size="large" style={{ width: "100%", marginTop: "12%" }} />
            }
          >
            <Publish />
          </Suspense>
        ),
      },
    ],
  },
  // 登录一级路由
  {
    path: "/login",
    element: <Login />,
  },
  // 404一级路由
  {
    path: "*",
    element: <NotFound />,
  },
]);

export default router;
